<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="margin: 50px;">
        <h1>学习反馈</h1>
        <p><b style="color: brown; margin-right: 20px;">热门校区</b><b>北京 &nbsp; 上海 &nbsp;广州 &nbsp;深圳</b></p>
        <p><b style="margin-right: 15px;">地区选择</b>
        <select id="one">
            <option value="">-请选择省份-</option>
        </select>
        <select id="two">
            <option value="">-请选择城市-</option>
        </select>
        <select id="three">
            <option value="">-请选择地区-</option>
        </select>
        </p>
        <p><b style="margin-right: 15px;">您的称呼</b>
        <input type="text" style="height: 20px;">
        </p>
        <p style="display: flex;"><b style="margin-right: 17px; margin-top: 5px;">宝贵建议</b><textarea></textarea></p>
        <button style="background: #6c757d; color: #fff; border: 0; border-radius: 5px;" onclick="tj()">确定提交</button>
    </div>
</body>
</html>
<script>
    var one=document.querySelector('#one')
    var two=document.querySelector('#two')
    var three=document.querySelector('#three')

    let pName=''
    var rOp={
        method:'GET',
        redirect:'follow'
    };
    fetch("https://hmajax.itheima.net/api/province",rOp)
    .then(response=>response.text())
    .then(result=>{
        let{message,list}=JSON.parse(result)
        let str=list.map((ele,index)=>{
            return`<option value="${ele}">${ele}</option>`
        })
        one.innerHTML=`<option value="">-请选择省份-</option>`+str.join("")
    })
    .catch(error=>console.log('error',error))
    one.addEventListener('click',function(){
        fetch(`https://hmajax.itheima.net/api/city?pname=${this.value}`,rOp)
        .then(response=>response.text())
        .then(result=>{
            let {message,list}=JSON.parse(result)
            let str =list.map((ele,index)=>{
                return `<option value="${ele}">${ele}</option>`
            })
            two.innerHTML=`<option value="">-请选择城市-</option>`+str.join('')
            pName=this.value
        })
        .catch(error=>console.log('error',error))
    })
    two.addEventListener('click',function(){
        fetch(`https://hmajax.itheima.net/api/area?pname=${pName}&cname=${this.value}`,rOp)
        .then(response=>response.text())
        .then(resule=>{
            let{message,list}=JSON.parse(resule)
            let str=list.map((ele,index)=>{
                return `<option value="${ele}">${ele}</option>`
            })
            three.innerHTML=`<option value="">-请选择地区-</option>`+str.join('')
        })
        .catch(error=>console.log('error',error))
    })
    function tj(){
        location.href='https://www.baidu.com'
    }
</script>